<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<u-form :model="model" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<!-- 	<view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
				<view class="u-flex">
					<text class="u-iconfont uicon-map-fill" style="#a76f0d;"></text>
					<text>{{ chooseAddress }}</text>
				</view>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view> -->

			<view class="address-box">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:"
					prop="consignee">
					<u-input placeholder="请填写收货人姓名" v-model="model.consignee" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:"
					prop="phone">
					<u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
				</u-form-item>

				<u-form-item label-width="150" label-position="left" label="所在省份:" prop="phone">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="showsfchange" :value="index" :range="sflits" range-key="name">
								<view class="uni-input">{{sf ? sf : "请选择省份"}}</view>
							</picker>
						</view>
					</view>
				</u-form-item>
				<u-form-item label-width="150" label-position="left" label="所在地市:" prop="phone">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="showdschange" :value="index" :range="dslist" range-key="name">
								<view class="uni-input">{{ds ? ds : "请选择地市"}}</view>
							</picker>
						</view>
					</view>
				</u-form-item>
				<u-form-item label-width="150" label-position="left" label="所在县区:" prop="phone" v-if="isshowxq">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="showxqschange" :value="index" :range="xqlist" range-key="name">
								<view class="uni-input">{{xq ? xq : "请选择县区"}}</view>
							</picker>
						</view>
					</view>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:"
					prop="address">
					<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>

			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text class="title">设为默认地址</text>
				<u-switch v-model="model.is_default" activeColor="#e9b461" size="40"></u-switch>
			</view>

			<!-- 功能按钮 -->
			<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
				<button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1"
					@tap="deleteAddress">删除收货地址</button>
				<button class="u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
			</view>
		</u-form>

	</view>
</template>

<script>
	import {
		MAP_KEY
	} from '@/env.js';
	import Auth from '@/ljshop/permission/index.js';
	export default {
		components: {},
		data() {
			return {
				showSelect: false, //省市区
				addressAreaList: [],
				addressId: 0, //收货地址ID
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},

				sf: '',
				sfid: '',
				ds: '',
				dsid: '',
				xq: '',
				xqid: '',
				type: '',
				sflits: [],
				dslist: [],
				xqlist: [],
				index: 0,
				isshowxq:true,

				model: {
					id: 0,
					consignee: '',
					phone: '',
					area_text: '',
					address: '',
					is_default: true,
					latitude: '',
					longitude: '',
				},

				errorType: ['message'],
				chooseAddress: '点击选择地理位置' ,//定位地址
				PHONE_EXP: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 手机号校验常量
			};
		},
		computed: {},
		onShow() {
			this.showsf()
		},
		onLoad() {

			this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
			uni.setNavigationBarTitle({
				title: this.addressId ? '编辑收货地址' : '添加收货地址'
			});
			this.addressId && this.getAddressInfo();
			// 微信导入
			this.$Route.query.addressData && this.wxAddressInit();
			
			// this.onEditBack()
		},
		methods: {



			// 提交
			submit() {
				let that = this;
				// 判断数据是否齐全
				let params = {
					phone: that.model.phone,
					consignee: that.model.consignee,
					address: that.model.address,
					sf:that.sf,
					ds:that.ds
				}
				for (let event in params) {
					if(!params[event]){
						uni.showToast({
							icon:'error',
							title:'请完善收货地址信息',
						})
						return
					}
				}
				// 判断三级
				if(that.xqlist.length !== 0 && that.xqid == ""){
					uni.showToast({
						icon:'error',
						title:'请完善地址信息'
					})
					return
				}
				// 手机号正则验证
				if(!that.PHONE_EXP.test(that.model.phone)){
					uni.showToast({
						icon:'error',
						title:'号码格式不正确',
					})
					return
				}
				if (that.addressId) {
					that.editAddress();

				} else {
					if(!that.isshowxq){
						that.xqid =that.dsid
					}
					that.$http(
						'address.appsave', {
							UId: uni.getStorageSync("UId"),
							isdef: that.model.is_default,
							consignee: that.model.consignee,
							phone: that.model.phone,
							areaName: that.sf + that.ds + that.xq,
							address: that.model.address,
							xqid: that.xqid
						},
						'保存中...'
					).then(res => {
						uni.showToast({
							icon:'none',
							title:'添加成功'
						})
						uni.navigateBack()
						if(that.model.is_default){
							setdefAddress()
						}
					});
				}
			},

			// 编辑添加地址
			editAddress() {
				let that = this;
				if(that.xqlist.length !== 0 && that.xqid == ""){
					uni.showToast({
						icon:'error',
						title:'请完善地址信息'
					})
					return
				}
				that.$http(
					'address.edit', {
						id: that.addressId,
						isdef: that.model.is_default,
						consignee: that.model.consignee,
						phone: that.model.phone,
						areaName: that.sf + that.ds + that.xq,
						address: that.model.address,
						xqid: that.xqid
					},
					'保存中...'
				).then(res => {
					uni.showToast({
						icon:'none',
						title:'修改成功'
					})
					uni.navigateBack()
					// if (res.code === 1) {
						if(that.model.is_default){
							setdefAddress()
						}
					// 	that.$Router.back();
					// }
					// that.$Router.back();
				});
			},
			showsf() {
				let that = this;
				that.$http('address.getsfarea').then(res => {
					that.sflits = res.list
				});
			},
			showds() {
				let that = this;
				that.$http(
					'address.getdqarea', {
						pId: that.sfid
					},
					'保存中...'
				).then(res => {
					//console.info(JSON.stringify(res))
					that.dslist = res.list
					that.ds="";
					that.dsid="";
					that.xq="";
					that.xqid="";

				});
			},
			showxq() {
				let that = this;
				that.$http(
					'address.getdqarea', {
						pId: that.dsid
					},
					'保存中...'
				).then(res => {
					//console.info(JSON.stringify(res))
					that.xqlist = res.list
					that.xq="";
					that.xqid="";
					// 不存在三级 使用二级作为最终收货点
					if(res.list.length == 0 ){
						that.xqid = that.dsid
					}
				});
			},

			showsfchange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value
				let that = this
				that.sf = that.sflits[this.index].name;
				that.sfid = that.sflits[this.index].id;
				if(that.sfid=="1"||that.sfid=="18"||that.sfid=="789"||that.sfid=="2228"){
					that.isshowxq =false;
				}else{
					that.isshowxq =true;
				}
				that.showds();
			},

			showdschange: function(e) {
				console.log(e.detail)
				this.index = e.detail.value
				let that = this
				that.ds = that.dslist[this.index].name;
				that.dsid = that.dslist[this.index].id;
				that.showxq();
			},

			showxqschange: function(e) {
				console.log(e.detail)
				this.index = e.detail.value
				let that = this
				that.xq = that.xqlist[this.index].name;
				that.xqid = that.xqlist[this.index].id;
				//that.showxq();
			},

			// 地址信息
			getAddressInfo() {
				const that = this;
				this.$http('address.getbyid', {
					id: that.$Route.query.id
				}).then(res => {
					let addressData = res.address;
					const dsId = addressData.area.parent.id
					that.addressId = addressData.id;
					that.model.is_default = addressData.isDefault
					that.model.address = addressData.address;
					that.model.phone = addressData.phone;
					that.model.consignee = addressData.consignee;
					
					// 判断直辖市再进行回显
					const arrs = [1,18,789,2228]
					console.log(arrs.indexOf(dsId));
					if(arrs.indexOf(dsId) !== -1){
						that.sfid = dsId
						that.sf = addressData.area.parent.name
						that.dsid = addressData.area.id
						that.ds = addressData.area.name
						that.isshowxq = false
						that.xqid = addressData.area.id;
					}else{
						that.xq = addressData.area.name;
						that.ds = addressData.area.parent.name;
						that.xqid = addressData.area.id;
						that.dsid = addressData.area.parent.id;
						that.sf = addressData.area.parent.parent.name;
						that.sfid = addressData.area.parent.parent.id
					}
					console.log(addressData,'=>xqid');
				});
			},

			// 删除收货地址
			deleteAddress() {
				const that = this;
				uni.showLoading({

				})
				that.$http(
					'address.del', {
						id: that.addressId
					},
					'删除中...'
				).then(res => {
					uni.hideLoading()

					that.$Router.back();

				});
			},
			setdefAddress(){ //uni.$emit('SELECT_ADDRESS', { addressData: JSON.stringify(addressData) });
				let that = this;
				that.$http(
					'address.edit', {
						UId: uni.getStorageSync("UId"),
					},
					'保存中...'
				).then(res => {
					if (res.code === 1) {
					  uni.$emit('SELECT_ADDRESS', { addressData: JSON.stringify(res.defAddress[0]) });
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.uni-picker-tips {
		font-size: 12px;
		color: #666;
		margin-bottom: 15px;
		padding: 0 15px;
		/* text-align: right; */
	}

	// 点击定位
	.location-item {
		font-size: 28rpx;
		font-weight: 500;
		background-color: #fff;
		color: rgba(167, 111, 13, 1);
	}

	// 表单
	.address-box {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.address-item {
		height: 96rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 25rpx;

		.item-title {
			color: #333;
			font-size: 28rpx;
			white-space: nowrap;
		}

		.inp {
			color: #333;
			font-size: 28rpx;
		}
	}

	.area-box {
		min-height: 120rpx;
		padding-bottom: 60rpx;
		background: #fff;
		padding: 30rpx 25rpx;
	
	.item-title {
			font-size: 28rpx;
			line-height: 28rpx;
			vertical-align: middle;
			white-space: nowrap;
		}

		.area-inp {
			color: #333;
			font-size: 28rpx;
			vertical-align: middle;
			margin-top: 8rpx;
			width: 550rpx;
		}
	}

	.default-box {
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
		}

		.switch {
			transform: scale(0.8);
		}
	}

	// 底部按钮
	.foot_box {
		.delete-btn {
			line-height: 70rpx;
			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.save-btn {
			// line-height: 70rpx;
			// background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			// border: 1rpx solid rgba(238, 238, 238, 1);
			// border-radius: 40rpx;
			// color: rgba(#fff, 0.9);
			
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 720rpx;
			border-radius: 20rpx;
			height:80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
		}
	}
	.uni-input{
		/*  #ifdef  APP-PLUS || H5 */ 
		width: 70vw !important;
       /*  #endif  */
	}
</style>
